<template>
  <view class="active-detail">
    <u-sticky bgColor="#fff">
      <u-tabs
        :list="tabList"
        :itemStyle="{ height: '44px', width: '50%' }"
        :scrollable="false"
        :current="curTab"
        @change="curTabChange"
        :lineColor="'#f09a3c'"
      ></u-tabs>
    </u-sticky>
    <view v-show="curTab == 0">
      <view class="detail">
      
        <u-swiper height="200" :list="list1" imgMode="scaleToFill"></u-swiper>
        <view class="content">
          <view class="flex" style="margin-top: 16px">
            <view class="flex-1">
              <view class="title wrap-2"
                >活動名稱活動名稱活動名稱活動名稱活動名稱活動名稱活動名稱</view
              >
              <view class="intro wrap"
                >活動詳情活動詳情活動詳情活動詳情活動詳情</view>
            </view>
           
          </view>
        </view>
      </view>
      <view class="mes">
        <u-cell-group>
          <u-cell
            @click="application"
            :isLink="true"
            title="活動報名"
            value="立即報名"
            label="2024-01-01 12:00 ~ 2024-01-02 12:00"
          ></u-cell>
        </u-cell-group>
      </view>
      <!-- <view class="mes">
        <u-cell-group>
          <u-cell :border="false">
            <view slot="title" class="u-slot-title flex">
              <text class="cell-key">运费</text>
              <view class="cell-value">代下单时确认</view>
            </view>
          </u-cell>
          <u-cell :border="false" :isLink="true" @click="actionShow = true">
            <view slot="title" class="u-slot-title flex">
              <text class="cell-key">服务</text>
              <view class="cell-value">线下门店 到店自提 收货后结算</view>
            </view>
          </u-cell>
          <u-cell :border="false">
            <view slot="title" class="u-slot-title flex">
              <text class="cell-key">其他</text>
              <view class="cell-value">注意事项注意事项注意事项注意事项</view>
            </view>
          </u-cell>
        </u-cell-group>
      </view> -->
      <view class="mes">
        <u-cell-group>
          <u-cell :isLink="true" value="查看全部" :border="false">
            <view slot="title" class="u-slot-title flex">
              <text class="cell-key">商品評價(2)</text>
            </view>
          </u-cell>
        </u-cell-group>
        <view class="eva-list">
          <view class="eva-person">
            <view class="group">
              <view class="person flex flex-c flex-j">
                <view class="nick">admin</view
                ><u-rate :count="count" v-model="value"></u-rate
              ></view>
              <view class="comment wrap-2">
                好评论 比在店里买要划算多了！还送了好多礼品
                我会用的！如果好了！还会来买
              </view>
            </view>
            <view class="group">
              <view class="person flex flex-c flex-j">
                <view class="nick">admin</view
                ><u-rate :count="count" v-model="value"></u-rate
              ></view>
              <view class="comment wrap-2">
                好评论 比在店里买要划算多了！还送了好多礼品
                我会用的！如果好了！还会来买
              </view>
            </view>
          </view>
        </view>
        <u-divider text="分割线"></u-divider>
      </view>
      <view class="mes">
        <view class="shop-info flex">
         
          <view class="flex-1">
            <view class="name">活动发起人</view>
            <u-rate :count="count" v-model="value"></u-rate>
          </view>
          <view class="btns">
            <u-button type="warning" size="small" text="評價"></u-button>
          </view>
        </view>
        <view class="eva-input">
          <u--textarea
            v-model="textarea"
            placeholder="請輸入內容"
          ></u--textarea>
        </view>
       
      </view>
    </view>
    <view v-show="curTab == 1" style="background: #fff;">
      <image
        style="width: 100%"
        src="https://img01.yzcdn.cn/upload_files/2020/09/09/FsEimZBC1MH3TsoRTnXlibcI6yel.jpg!730x0.jpg"
        mode="widthFix"
      ></image>
      <image
        style="width: 100%"
        src="https://img01.yzcdn.cn/upload_files/2021/07/20/FuykDlmHTll3FSQKvyFn0kam0N_8.jpg"
        mode="widthFix"
      ></image>
      <image
        style="width: 100%"
        src="https://img01.yzcdn.cn/upload_files/2020/09/09/FsEimZBC1MH3TsoRTnXlibcI6yel.jpg!730x0.jpg"
        mode="widthFix"
      ></image>
    </view>
    <u-action-sheet :show="actionShow" @close="actionShow = false" :round="10">
      <view class="active-rule">
        <view class="group" style="margin-top: 0">
          <view class="key">线下门店</view>
          <view class="value">该店铺拥有线下门店，商家已展示门店信息</view>
        </view>
        <view class="group">
          <view class="key">到店自提</view>
          <view class="value">到店自提xx</view>
        </view>
        <view class="group">
          <view class="key">收货后结算</view>
          <view class="value">收货后结算xx</view>
        </view>
        <view class="btn" @click="actionShow = false">我知道了</view>
      </view>
    </u-action-sheet>
  </view>
</template>

<script>
var vk = uni.vk;
export default {
  data() {
    // 页面数据变量
    return {
      count: 5,
      value: 4,
      curTab: 0,
      tabList: [
        {
          name: "活動",
        },
        {
          name: "詳情",
        },
      ],
      actionShow: false,
      list1: [
        "https://cdn.uviewui.com/uview/swiper/swiper1.png",
        "https://cdn.uviewui.com/uview/swiper/swiper2.png",
        "https://cdn.uviewui.com/uview/swiper/swiper3.png",
      ],
    };
  },
  // 监听 - 页面每次【加载时】执行(如：前进)
  onLoad(options = {}) {
    vk = uni.vk;
    this.options = options;
    this.init(options);
  },
  // 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
  onReady() {},
  // 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
  onShow() {},
  // 监听 - 页面每次【隐藏时】执行(如：返回)
  onHide() {},
  // 函数
  methods: {
    application(){
      uni.showModal({
        title: '提示',
        content: '是否确定报名？',
        success: function (res) {
          if (res.confirm) {
            console.log('用户点击确定');
          } else if (res.cancel) {
            console.log('用户点击取消');
          }
        }
      });
    },
    curTabChange(e) {
      console.log(e);
      this.curTab = e.index;
    },
    // 页面数据初始化函数
    init(options) {},
    calc() {
      let that = this;
      let form1 = that.form1;
      // 开始调用云函数
      vk.callFunction({
        url: "template/test/pub/addition", // 云函数service目录下的地址，路径带/pub/的云函数不需要用户登录即可请求
        title: "请求中...",
        //data : form1, // 这样写也可以，下面这样写是为了方便新手理解
        data: {
          num1: form1.num1,
          num2: form1.num2,
        },
        success: (data) => {
          that.value = data.value;
        },
      });
    },
  },
};
</script>
<style lang="scss">
.eva-input {
  padding-bottom: 20px;
  margin: 4px 16px 0;
}
.shop-info {
  padding: 16px;
  .btns {
    margin-top: 12px;
  }
  .name {
    text-indent: 5px;
    margin-bottom: 8px;
    line-height: 20px;
    font-size: 16px;
  }
  .logo {
    margin-right: 16px;
    width: 48px;
    height: 48px;
  }
}
.eva-list {
  padding: 0 12px;
  .eva-person {
    .group {
      padding: 6px;
      // margin-top: 4px;
      .comment {
        line-height: 20px;
        color: #323233;
        padding: 8px 0 6px 0;
        word-break: break-all;
        font-size: 14px;
        text-align: left;
      }
      .nick {
        font-size: 14px;
        color: #969799;
      }
    }
  }
  .eva-tag {
    .tag {
      margin: 0 6px 6px 0;
      font-size: 14px;
      background: #f2f3f5;
      color: #323232;
      padding: 4px 8px;
      border-radius: 8px;
    }
  }
}
.active-rule {
  padding: 20px 16px;
  text-align: left;
  .btn {
    margin-top: 60px;
    // width: 256px;
    height: 40px;
    line-height: 40px;
    border-radius: 20px;
    text-align: center;
    color: #fff;
    border: solid 1px #334155;
    background: #334155;
  }
  .group {
    margin-top: 32px;
    .key {
      font-weight: bold;
    }
    .value {
      margin-top: 6px;
      color: grey;
      font-size: 14px;
    }
  }
}
.active-detail {
  // padding-bottom: 50px;
  height: 100%;
  background: #f7f8fa;
  .mes {
    margin-top: 8px;
    background: #fff;
    .cell-key {
      margin-right: 24px;
      color: grey;
    }
  }
  .detail {
    background: #fff;
    .content {
      padding: 16px;
      .share {
        margin-top: 12px;
        margin-left: 6px;
        .txt {
          font-size: 14px;
          color: grey;
        }
      }
      .title {
        line-height: 20px;
        color: #323233;
        font-weight: bold;
      }
      .intro {
        position: relative;
        margin: 4px 0;
        color: #9a9a9a;
        font-size: 14px;
      }
    }
    .unit {
      position: relative;
      top: 8px;
      font-size: 16px;
      color: #323232;
    }
    .num {
      margin-left: 4px;
      font-size: 24px;
      font-weight: bold;
      color: #323232;
    }
  }
}
</style>